<div class="col-xs-12 col-sm-6 col-md-4">
  <section class="FeatureCard" id="BoxTruffleDrizzle">
    <a href="/boxes/drizzle">
      <div class="FeatureBody withImage">
        <img class="FeatureImage" src="https://github.com/truffle-box/drizzle-box/blob/master/box-img-sm.png?raw=true" alt="drizzle-box" onerror="javascript:this.src='/images/ballotin/loading-banner.png'" />
      </div>
    </a>

    <footer class="BoxRundown">
      <a href="/boxes/drizzle"><h3>drizzle<small class="GitHubStars"><a class="github-button" href="https://github.com/truffle-box/drizzle-box" data-icon="octicon-star" data-show-count="true" aria-label="Star truffle-box/drizzle-box on GitHub">Star</a></small></h3></a>

      <p>This box comes with everything you need to start using smart contracts from a react app with Drizzle. It includes <code>drizzle</code>, <code>drizzle-react</code> and <code>drizzle-react-components</code> to give you a complete overview of Drizzle's capabilities.</p>

      <ul class="BoxTagsList">
        <li>
          <a href="#">drizzle</a>
        </li>
        <li>
          <a href="#">webpack</a>
        </li>
        <li>
          <a href="#">webapp</a>
        </li>
        <li>
          <a href="#">official</a>
        </li>
      </ul>
    </footer>
  </section>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
  <section class="FeatureCard" id="BoxTruffleReact">
    <a href="/boxes/react">
      <div class="FeatureBody withImage">
        <img class="FeatureImage" src="https://github.com/truffle-box/react-box/blob/master/box-img-sm.png?raw=true" alt="react-box" onerror="javascript:this.src='/images/ballotin/loading-banner.png'" />
      </div>
    </a>

    <footer class="BoxRundown">
      <a href="/boxes/react"><h3>react<small class="GitHubStars"><a class="github-button" href="https://github.com/truffle-box/react-box" data-icon="octicon-star" data-show-count="true" aria-label="Star truffle-box/react-box on GitHub">Star</a></small></h3></a>

      <p>This box comes with everything you need to start using smart contracts from a react app. This is as barebones as it gets, so nothing stands in your way.</p>

      <ul class="BoxTagsList">
        <li>
          <a href="#">react</a>
        </li>
        <li>
          <a href="#">webpack</a>
        </li>
        <li>
          <a href="#">webapp</a>
        </li>
        <li>
          <a href="#">official</a>
        </li>
      </ul>
    </footer>
  </section>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
  <section class="FeatureCard" id="BoxTruffleReactAuth">
    <a href="/boxes/react-auth">
      <div class="FeatureBody withImage">
        <img class="FeatureImage" src="https://github.com/truffle-box/react-auth-box/blob/master/box-img-sm.png?raw=true" alt="react-auth-box" onerror="javascript:this.src='/images/ballotin/loading-banner.png'" />
      </div>
    </a>

    <footer class="BoxRundown">
      <a href="/boxes/react-auth"><h3>react-auth<small class="GitHubStars"><a class="github-button" href="https://github.com/truffle-box/react-auth-box" data-icon="octicon-star" data-show-count="true" aria-label="Star truffle-box/react-auth-box on GitHub">Star</a></small></h3></a>

      <p>This box adds react-router, redux and redux-auth-wrapper for authentication powered by a smart contract. Great for building your own auth system.</p>

      <ul class="BoxTagsList">
        <li>
          <a href="#">auth</a>
        </li>
        <li>
          <a href="#">react</a>
        </li>
        <li>
          <a href="#">redux</a>
        </li>
        <li>
          <a href="#">webpack</a>
        </li>
        <li>
          <a href="#">webapp</a>
        </li>
        <li>
          <a href="#">official</a>
        </li>
      </ul>
    </footer>
  </section>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
  <section class="FeatureCard" id="BoxTruffleReactUport">
    <a href="/boxes/react-uport">
      <div class="FeatureBody withImage">
        <img class="FeatureImage" src="https://github.com/truffle-box/react-uport-box/blob/master/box-img-sm.png?raw=true" alt="react-uport-box" onerror="javascript:this.src='/images/ballotin/loading-banner.png'" />
      </div>
    </a>

    <footer class="BoxRundown">
      <a href="/boxes/react-uport"><h3>react-uport<small class="GitHubStars"><a class="github-button" href="https://github.com/truffle-box/react-uport-box" data-icon="octicon-star" data-show-count="true" aria-label="Star truffle-box/react-uport-box on GitHub">Star</a></small></h3></a>

      <p>This box adds react-router, redux and redux-auth-wrapper for authentication powered by UPort. The easiest way to get started with UPort.</p>

      <ul class="BoxTagsList">
        <li>
          <a href="#">uport</a>
        </li>
        <li>
          <a href="#">react</a>
        </li>
        <li>
          <a href="#">redux</a>
        </li>
        <li>
          <a href="#">webpack</a>
        </li>
        <li>
          <a href="#">webapp</a>
        </li>
        <li>
          <a href="#">official</a>
        </li>
      </ul>
    </footer>
  </section>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
  <section class="FeatureCard" id="BoxPetShop">
    <a href="/boxes/pet-shop">
      <div class="FeatureBody withImage">
        <img class="FeatureImage" src="https://github.com/truffle-box/pet-shop-box/blob/master/box-img-sm.png?raw=true" alt="pet-shop-box" onerror="javascript:this.src='/images/ballotin/loading-banner.png'" />
      </div>
    </a>

    <footer class="BoxRundown">
      <a href="/boxes/pet-shop"><h3>pet-shop<small class="GitHubStars"><a class="github-button" href="https://github.com/truffle-box/pet-shop-box" data-icon="octicon-star" data-show-count="true" aria-label="Star truffle-box/pet-shop-box on GitHub">Star</a></small></h3></a>

      <p>This box contains all you need to get started with our Pet Shop tutorial.</p>

      <ul class="BoxTagsList">
        <li>
          <a href="#">tutorial</a>
        </li>
        <li>
          <a href="#">jquery</a>
        </li>
        <li>
          <a href="#">webapp</a>
        </li>
        <li>
          <a href="#">official</a>
        </li>
      </ul>
    </footer>
  </section>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
  <section class="FeatureCard" id="BoxTutorialToken">
    <a href="/boxes/tutorialtoken">
      <div class="FeatureBody withImage">
        <img class="FeatureImage" src="https://github.com/truffle-box/tutorialtoken-box/blob/master/box-img-sm.png?raw=true" alt="tutorialtoken-box" onerror="javascript:this.src='/images/ballotin/loading-banner.png'" />
      </div>
    </a>

    <footer class="BoxRundown">
      <a href="/boxes/tutorialtoken"><h3>tutorialtoken<small class="GitHubStars"><a class="github-button" href="https://github.com/truffle-box/tutorialtoken-box" data-icon="octicon-star" data-show-count="true" aria-label="Star truffle-box/tutorialtoken-box on GitHub">Star</a></small></h3></a>

      <p>This box contains all you need to get started with our OpenZeppelin (TutorialToken) tutorial.</p>

      <ul class="BoxTagsList">
        <li>
          <a href="#">tutorial</a>
        </li>
        <li>
          <a href="#">jquery</a>
        </li>
        <li>
          <a href="#">webapp</a>
        </li>
        <li>
          <a href="#">official</a>
        </li>
        <li>
          <a href="#">openzeppelin</a>
        </li>
      </ul>
    </footer>
  </section>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
  <section class="FeatureCard" id="BoxWebpack">
    <a href="/boxes/webpack">
      <div class="FeatureBody withImage">
        <img class="FeatureImage" src="https://github.com/truffle-box/webpack-box/blob/master/box-img-sm.png?raw=true" alt="webpack-box" onerror="javascript:this.src='/images/ballotin/loading-banner.png'" />
      </div>
    </a>

    <footer class="BoxRundown">
      <a href="/boxes/webpack"><h3>webpack<small class="GitHubStars"><a class="github-button" href="https://github.com/truffle-box/webpack-box" data-icon="octicon-star" data-show-count="true" aria-label="Star truffle-box/webpack-box on GitHub">Star</a></small></h3></a>

      <p>Example webpack project with Truffle. Includes contracts, migrations, tests, user interface and webpack build pipeline.</p>

      <ul class="BoxTagsList">
        <li>
          <a href="#">webpack</a>
        </li>
        <li>
          <a href="#">official</a>
        </li>
      </ul>
    </footer>
  </section>
</div>

<div class="col-xs-12 col-sm-6 col-md-4">
  <section class="FeatureCard" id="BoxMetacoin">
    <a href="/boxes/metacoin">
      <div class="FeatureBody withImage">
        <img class="FeatureImage" src="https://github.com/truffle-box/metacoin-box/blob/master/box-img-sm.png?raw=true" alt="metacoin-box" onerror="javascript:this.src='/images/ballotin/loading-banner.png'" />
      </div>
    </a>

    <footer class="BoxRundown">
      <a href="/boxes/metacoin"><h3>metacoin<small class="GitHubStars"><a class="github-button" href="https://github.com/truffle-box/metacoin-box" data-icon="octicon-star" data-show-count="true" aria-label="Star truffle-box/metacoin-box on GitHub">Star</a></small></h3></a>

      <p>MetaCoin smart contracts example box.</p>

      <ul class="BoxTagsList">
        <li>
          <a href="#">official</a>
        </li>
      </ul>
    </footer>
  </section>
</div>
